<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no" />
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="../c/aui.css" />
		<link rel="stylesheet" type="text/css" href="../c/suxiangw.css" />
		<style media="screen">
			body{
				background: #000;
			}
			#sx-header{
				background: #161823 !important;
			}
			.aui-btn img{
				width: 2rem;
			}
			#sx-header .sx-ul {
				margin: 0 1rem;
			}
			#sx-header .sx-ul li{
				text-align: center;
				display: inline-block;
				margin: 0 1rem;
				padding: 0 0.5rem;
			}
			.aui-bar-nav .aui-title{
				left: 3rem;
				right: 3rem;
				color: #fff;
				font-size: 0.75rem;
			}
			.active{
				border-bottom: 1px solid #FACE15;
				color: #FACE15;
				font-weight: bold;
				font-size: 0.85rem;
			}
		</style>
	</head>
	<body>
		<header class="aui-bar aui-bar-nav" id="sx-header">
			<a class="aui-pull-left aui-btn" tapmode onclick="_close()"><img src="../i/left.png" /></a>
			<ul class="aui-title sx-ul">
				<li id="tab0" class="active" tapmode onclick="randomSwitchBtn(0)">
					关注
				</li>
				<li id="tab1" tapmode onclick="randomSwitchBtn(1)">
					粉丝
				</li>
			</ul>
		</header>
	</body>
	<script type="text/javascript" src="../j/api.js"></script>
	<script type="text/javascript">
		apiready = function() {
			api.parseTapmode();
			var frames = [];
			for (var i = 0; i < 2; i++) {
				var name = 'user_fsgz_' + i;
				var frame = {};
				frame.name = name;
				frame.url = _h_w + 'user_fsgz.html';
				frame.pageParam = {
					index : i,
					uid:api.pageParam['uid']
				};
				frames.push(frame);
			}
			_group(frames);
			api.parseTapmode();
		}
		var retindex
		function _group(frames) {
			console.log(JSON.stringify(frames));
			var header = $api.byId('sx-header');
			$api.fixStatusBar(header);
			var headerPos = $api.offset(header);
			api.openFrameGroup({
				name : 'user_fsgz',
				scrollEnabled : true,
				bounces : true,
				rect : {
					x : 0,
					y : headerPos.h,
					w : 'auto',
					h : api.winHeight - headerPos.h,
				},
				index : api.pageParam['index'] ? api.pageParam['index'] : 0,
				frames : frames,
				preload : 0,	// 预加载的 frame 个数，默认加载当前页后面一个
			}, function(ret, err) {
				retindex = ret.index;
				active(retindex);
				api.execScript({
					frameName : 'user_fsgz_' + retindex,
					script : 'banner();'
				});
			});
		}

		// 点击分类栏目时，设置 frame 组当前可见 frame
		function randomSwitchBtn(index) {
			active(index)
			api.setFrameGroupIndex({
				name : 'user_fsgz',
				index : index,
				scroll : true, //是否平滑滚动至目标窗口，即是否带有动画
			});
		}

		// 点击样式
		function active(index) {
			$api.removeCls($api.dom(".sx-ul .active"), 'active');
			$api.addCls($api.byId('tab' + index), 'active');
		}

		// 刷新
		function shuaxin() {
			api.execScript({
				frameName : 'user_fsgz_' + retindex,
				script : 'api.refreshHeaderLoading();'
			});
		}
	</script>
	</html>
